<template>
  <view class="container">
    <view class="form">
      <view class="form-item">
        <text class="label">姓名</text>
        <input type="text" v-model="name" placeholder="张三" />
      </view>

      <view class="form-item">
        <text class="label">联系电话</text>
        <input type="tel" v-model="phone" placeholder="18888888888" @blur="validatePhone('phone')" />
        <text v-if="phoneError" class="error">{{ phoneError }}</text>
      </view>

      <view class="form-item">
        <text class="label">备用联系方式</text>
        <input type="tel" v-model="backupPhone" placeholder="18888888888" @blur="validatePhone('backupPhone')" />
        <text v-if="backupPhoneError" class="error">{{ backupPhoneError }}</text>
      </view>

      <view class="form-item">
        <text class="label">酒店地址</text>
        <input type="text" v-model="hotelAddress" placeholder="××省××市××区亚泉酒店" />
      </view>

      <view class="form-item">
        <text class="label">旅游线路</text>
        <view class="checkbox-group">
          <checkbox-group @change="onRouteChange">
            <view class="checkbox-row">
              <label v-for="route in routes" :key="route" class="checkbox-label">
                <checkbox :value="route" :checked="selectedRoutes.includes(route)" />
                {{route}}
              </label>
            </view>
          </checkbox-group>
        </view>
      </view>

      <view class="form-item">
        <text class="label">参与人数</text>
        <view class="number-input" v-for="(item, index) in participants" :key="index">
          <text>{{item.type}}</text>
          <text class="item-price">¥{{item.price}}</text>
          <view class="counter">
            <button @click="decreaseCount(index)">-</button>
            <input type="number" v-model="item.count" />
            <button @click="increaseCount(index)">+</button>
          </view>
        </view>
      </view>

      <view class="form-item">
        <text class="label">需要支付金额</text>
        <view class="price_box modify-link-parent">
          <input type="number" :value="totalPrice" class="total-price" disabled />
          <!-- <text class="modify-link" @click="showModifyPriceModal">修改金额</text> -->
        </view>
      </view>
    </view>
    <button class="submit-btn" @click="submitForm">确认提交</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        name: '张三',
        phone: '18888888888',
        backupPhone: '18888888888',
        hotelAddress: '××省××市××区亚泉酒店',
        routes: ['旅顺', '金石滩', '大连市区', '圣亚', '丹东', '山东半岛', '天津', '广东', '四川盆地'],
        selectedRoutes: ['旅顺', '圣亚'],
        participants: [{
            type: '成人',
            price: 148,
            count: 1
          },
          {
            type: '老人学生',
            price: 100,
            count: 1
          },
          {
            type: '儿童(一米三以下)',
            price: 50,
            count: 0
          }
        ],
        totalPrice: 248,
        phoneError: '',
        backupPhoneError: ''
      }
    },
    methods: {
      onRouteChange(e) {
        this.selectedRoutes = e.detail.value;
      },
      decreaseCount(index) {
        if (this.participants[index].count > 0) {
          this.participants[index].count--;
        }
        this.calculateTotal();
      },
      increaseCount(index) {
        this.participants[index].count++;
        this.calculateTotal();
      },
      calculateTotal() {
        this.totalPrice = this.participants.reduce((total, item) => {
          return total + (item.price * item.count);
        }, 0);
      },
      validatePhone(type) {
        const phoneRegex = /^1[0-9]{10}$/;
        if (type === 'phone' && !phoneRegex.test(this.phone)) {
          this.phoneError = '号码格式不正确';
        } else if (type === 'phone') {
          this.phoneError = '';
        }
        if (type === 'backupPhone' && !phoneRegex.test(this.backupPhone)) {
          this.backupPhoneError = '备用电话号码必须是以1开头的11位数字';
        } else if (type === 'backupPhone') {
          this.backupPhoneError = '';
        }
      },
      showModifyPriceModal() {
        uni.showModal({
          title: '请输入金额',
          editable: true,
          success: (res) => {
            if (res.confirm) {
              this.totalPrice = res.content;
            }
          }
        });
      },
      modifyPrice() {
        // Implement price modification logic
      },
      submitForm() {
        // Implement form submission logic
      }
    }
  }
</script>

<style scoped>
  .container {
    padding: 20rpx;
  }

  .header {
    font-size: 36rpx;
    font-weight: bold;
    text-align: center;
    margin-bottom: 30rpx;
  }

  .form-item {
    margin-bottom: 20rpx;
  }

  .label {
    display: block;
    margin-bottom: 10rpx;
    font-weight: 600;
  }

  input {
    width: 95%;
    height: 80rpx;
    background-color: #f5f7fa;
    border-radius: 10rpx;
    padding: 0 20rpx;
    border: 1rpx solid #ddd;
  }

  .checkbox-group {
    display: flex;
    flex-wrap: wrap;
    margin: auto;
    justify-content: center;
    align-items: center;
    width: fit-content;
    /* 这将使盒子的宽度只包含其内容，从而使盒子可以被居中 */
  }

  .checkbox-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中，如果想在垂直方向上居中，需要确保flex-direction为column或者你的元素高度固定 */
  }

  .checkbox-label {
    display: flex;
    align-items: center;
    width: 30%;
    /* Adjusted to fit three in a row */
    margin-bottom: 10rpx;
    justify-content: flex-start;
    /* Ensure proper alignment */
  }

  .checkbox-label checkbox {
    margin-right: 10rpx;
  }

  .number-input {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10rpx;
  }

  .counter {
    display: flex;
    align-items: center;
  }

  .counter button {
    width: 60rpx;
    height: 60rpx;
    line-height: 60rpx;
    text-align: center;
    background-color: #f5f7fa;
    border: 1rpx solid #ddd;
  }

  .counter input {
    width: 80rpx;
    text-align: center;
    border: 1rpx solid #ddd;
    height: 60rpx;
  }

  .item-price {
    color: red;
    font-size: 28rpx;
  }

  .price_box {
    display: flex;
    align-items: center;
    width: 97%;
    background-color: #f5f7fa;
    border-radius: 10rpx;
    padding: 10rpx;
    border: 1rpx solid #ddd;
  }

  .total-price {
    width: 100px;
    border: none;
    background: none;
    text-align: left;
    /* 确保金额数字左对齐 */
  }

  .modify-link-parent {
    display: flex;
    justify-content: space-between;
    /* 使“修改金额”文本靠右对齐，同时确保输入框靠左对齐 */
  }

  .modify-link {
    color: blue;
    text-decoration: none;
  }

  .submit-btn {
    width: 80%;
    height: 90rpx;
    line-height: 90rpx;
    background-color: #007AFF;
    color: white;
    text-align: center;
    border-radius: 20rpx;
    margin-top: 30rpx;
  }

  .error {
    color: red;
    font-size: 24rpx;
  }
</style>